<template>
  <div class="event-application">
    <h2>活动审核</h2>
    <!-- 1. 选择组织 -->
    <div class="org-select">
      <label>选择组织：</label>
      <el-select v-model="selectedOrgId" placeholder="请选择组织" @change="fetchActivityList">
        <el-option v-for="org in orgList" :key="org.orgId" :label="org.name" :value="org.orgId" />
      </el-select>
    </div>

    <!-- 2. 显示活动列表 -->
    <div v-if="activityList.length > 0" class="activity-list">
      <h3>活动列表</h3>
      <el-table :data="activityList" style="width: 100%" @row-click="handleRowClick">
        <el-table-column prop="title" label="活动名称" />
        <el-table-column prop="status" label="状态" />
      </el-table>
    </div>
    <div v-else-if="selectedOrgId" class="no-activity">暂无活动</div>

    <!-- 活动详情弹窗 -->
    <el-dialog v-model="dialogVisible" title="活动详情" width="480px" :close-on-click-modal="false">
      <div v-if="currentActivity">
        <div class="detail-row"><span class="label">活动名称：</span>{{ currentActivity.title }}</div>
        <div class="detail-row"><span class="label">内容：</span>{{ currentActivity.content }}</div>
        <div class="detail-row"><span class="label">地点：</span>{{ currentActivity.location }}</div>
        <div class="detail-row"><span class="label">分数：</span>{{ currentActivity.point }}</div>
        <div class="detail-row"><span class="label">开始时间：</span>{{ currentActivity.startTime }}</div>
        <div class="detail-row"><span class="label">结束时间：</span>{{ currentActivity.endTime }}</div>
        <div class="detail-row"><span class="label">状态：</span>{{ currentActivity.status }}</div>
        <div class="detail-row" style="margin-top: 18px;">
          <el-button size="small" type="success" @click="approveActivity(currentActivity.actId)"
            :disabled="currentActivity.status === 'APPROVED'">通过</el-button>
          <el-button size="small" type="danger" @click="rejectActivity(currentActivity.actId)"
            :disabled="currentActivity.status === 'REJECTED'">拒绝</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const orgList = ref([])
const activityList = ref([])
const selectedOrgId = ref(null)
const adminId = localStorage.getItem('adminId')

const dialogVisible = ref(false)
const currentActivity = ref(null)

// 获取组织列表
const fetchOrgList = async () => {
  try {
    const res = await axios.get(`http://localhost:8080/admin/${adminId}/getOrgList`)
    if (res.data && res.data.code === 200) {
      orgList.value = res.data.data || []
    } else {
      ElMessage.error(res.data.msg || '获取组织列表失败')
    }
  } catch (e) {
    ElMessage.error('网络错误，无法获取组织列表')
  }
}

// 获取活动列表
const fetchActivityList = async () => {
  activityList.value = []
  if (!selectedOrgId.value) return
  try {
    const res = await axios.get(`http://localhost:8080/admin/${adminId}/${selectedOrgId.value}/getOrgActivityList`)
    if (res.data && res.data.code === 200) {
      activityList.value = res.data.data || []
      console.log('活动列表:', activityList.value)
    } else {
      ElMessage.error(res.data.msg || '获取活动列表失败')
    }
  } catch (e) {
    ElMessage.error('网络错误，无法获取活动列表')
  }
}

// 行点击事件，弹出详情
const handleRowClick = (row) => {
  currentActivity.value = row
  console.log('当前活动:', currentActivity.value)
  dialogVisible.value = true
}

// 通过活动
const approveActivity = async (id) => {
  try {
    const res = await axios.put(
      `http://localhost:8080/admin/${adminId}/approveActivity`,
      id,
      { headers: { 'Content-Type': 'application/json' } }
    )
    if (res.data && res.data.code === 200) {
      ElMessage.success('已通过该活动')
      dialogVisible.value = false
      fetchActivityList()
    } else {
      ElMessage.error(res.data.msg || '操作失败')
    }
  } catch (e) {
    ElMessage.error('网络错误，无法操作')
  }
}

// 拒绝活动
const rejectActivity = async (id) => {
  try {
    const res = await axios.put(
      `http://localhost:8080/admin/${adminId}/rejectActivity`,
      id,
      { headers: { 'Content-Type': 'application/json' } }
    )
    console.log('adminId',adminId)
    console.log('id',id)
    console.log('res',res)
    if (res.data && res.data.code === 200) {
      ElMessage.success('已拒绝该活动')
      dialogVisible.value = false
      fetchActivityList()
    } else {
      ElMessage.error(res.data.msg || '操作失败')
    }
  } catch (e) {
    ElMessage.error('网络错误，无法操作')
  }
}

onMounted(fetchOrgList)
</script>

<style scoped lang="scss">
.event-application {
  max-width: 700px;
  margin: 40px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(90, 169, 233, 0.10);
  padding: 32px 28px;

  h2 {
    text-align: center;
    color: #357ab8;
    margin-bottom: 24px;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 2px;
  }

  .org-select {
    margin-bottom: 32px;
    display: flex;
    align-items: center;

    label {
      font-size: 1.1rem;
      color: #357ab8;
      margin-right: 12px;
      font-weight: 500;
    }

    .el-select {
      min-width: 220px;
    }
  }

  .activity-list {
    margin-top: 12px;

    h3 {
      color: #357ab8;
      margin-bottom: 16px;
      font-size: 1.2rem;
      font-weight: 500;
    }
  }

  .no-activity {
    margin-top: 32px;
    color: #aaa;
    text-align: center;
    font-size: 1.1rem;
  }
}

.detail-row {
  margin-bottom: 12px;
  font-size: 1.08rem;
  .label {
    color: #357ab8;
    font-weight: 500;
    margin-right: 8px;
  }
}
</style>